<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap">
  <nz-card [nzBodyStyle]="{'padding-bottom':0}" class="m-b-10">
    <form nz-form>
      <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24}">
        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">用户名</nz-form-label>
            <nz-form-control>
              <input nz-input name="userName" [(ngModel)]="searchParam.userName" placeholder="请输入用户名"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">手机号</nz-form-label>
            <nz-form-control>
              <input nz-input name="mobile" [(ngModel)]="searchParam.mobile" placeholder="请输入手机号"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <ng-container *ngIf="!isCollapse">
          <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
            <nz-form-item>
              <nz-form-label [nzFor]="">用户状态</nz-form-label>
              <nz-form-control>
                <nz-select name="available" [(ngModel)]="searchParam.available" nzPlaceHolder="下拉选择" nzAllowClear>
                  <nz-option *ngFor="let item of isEnabledOptions" [nzValue]="item.value"
                             [nzLabel]="item.label"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24">
            <nz-form-item>
              <nz-form-label [nzFor]="">创建时间</nz-form-label>
              <nz-form-control>
                <nz-range-picker name="createTime" [(ngModel)]="searchParam.createTime"
                                 (ngModelChange)="changeCreateTime($event)"
                                 [nzShowTime]="true"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24"></div>
        </ng-container>

        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="24" nzXs="24" class="text-right p-0">
          <button nz-button [nzType]="'primary'" (click)="getDataList()"><i nz-icon nzType="search"></i>搜索</button>
          <button nz-button class="m-l-15" (click)="resetForm()"><i nz-icon nzType="close-circle" nzTheme="outline"></i>重置
          </button>
          <a class="collapse operate-text" (click)="isCollapse=!isCollapse">
            展开
            <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
          </a>
        </div>
      </div>
    </form>
  </nz-card>


  <app-card-table-wrap>
    <app-ant-table (changePageSize)="changePageSize($event)" (changePageNum)="getDataList($event)"
                   [tableConfig]="tableConfig" [tableData]="dataList"></app-ant-table>
    <ng-template #operationTpl let-name="name" let-id="id">
      <span *appAuth="ActionCode.RoleSetAuth" class="operate-text" (click)="resetPassword(id)">重置密码</span>
      <span *appAuth="ActionCode.RoleEdit" class="operate-text" (click)="edit(id)">编辑</span>
    </ng-template>
  </app-card-table-wrap>
</div>
<ng-template #statusSwitchTpl let-available="available" let-id="id">
  <nz-switch [nzControl]="true" [ngModel]="available" (click)="changeStatus(available,id)"
             nzCheckedChildren="启用"
             nzUnCheckedChildren="禁用"></nz-switch>
</ng-template>
